A PageInspector Tutorial

After completing this tutorial, you will be able to:

• Check a file
• Locate HTML errors within a file
• Correct HTML errors from within PageInspector
• Save a corrected file
• Open a file as Read Only so that it can be edited within another application.

Conventions used in this tutorial:
This button is referred to as the "Fix" button.
This button is referred to as the "Delete" button.

Using PageInspector to Correct Errors

1. Open the folder "Sample Files", which is in the PageInspector Folder.
   
   
2. Select the file named "Tutorial", and choose "Duplicate" from the "File" menu.
   
   
3. Unlock the file "Tutorial copy" from the Finder's "Get Info" window, so that you modify the file.
   
   
4. Launch PageInspector by double-clicking its icon in the Finder.
   
   
5. Choose "Open..." from the File menu.
   
   
6. Open the file "Tutorial copy" (It is in the "Sample Files" Folder).
   
   
7. Upon completion of the scan, you may wish to open the text display area of the Errors window if it is not already shown.
   
   
8. Browse through the Errors window, and highlight each error in turn. Notice that the text display area shows the cause of the selected error.
   
   
9. Highlight the First Error: "File name does not end with .htm or .html".
   To Correct: Return to the Finder, and rename "Tutorial copy" to "Tutorial copy.html". Return to PageInspector and see what happens. Alternatively, the AppleScript named "Fix Selected Error" will correct this error for you.
   
   
10. Highlight the Second Error: ""broken/link.jpeg" Unable to find link.".
    To Correct: Click the "Fix" button, and familiarise yourself with the link picker.
    
    
11. Highlight the Third Error: ""0A94A2" Hex colour codes must be preceded by "#".".
    When using colour codes instead of defined colour names, the code should be preceded by the symbol '#'.
    To Correct: Click the "Fix" button, and '#' will be added to the beginning of the colour code.
    
    
12. Highlight the Fourth Error: ""<B>" This tag must be closed before "<I>" is closed." This an example of an overlapping tag. The "<B>" tag was opened within the environment "<I>", and therefore it must be closed within this same environment, that is, before "<I>" is closed.
    To Correct: PageInspector cannot fix this error. You must correct it in a text editor.
    
    
13. Highlight the Fifth Error: ""<BRW>" This is an unrecognised tag." The author of this page had meant to type "BR", but actually typed "BRW".
    To Correct: Click on the "Fix" button, and enter the tag as it should be.
    
    
14. Highlight the Sixth Error: "'Consectetuer' This font is not installed on this Macintosh." This file is using a typeface that is not present on this system.
    To Correct: PageInspector cannot fix this error. You must correct it in a text editor. For compatibility reasons, this font tag would probably be removed.
    
    
15. Highlight the Seventh Error: "'<IMG>' This tag cannot be closed." This tag is not a style or formatting tag for text, and does not need to be closed.
    To Correct: Click the "Delete" button, and the entire tag will be removed. Clicking the "Fix" button in this case would remove the slash from the start of this tag, leaving "<IMG>".
    
    
16. Highlight the Eighth Error: "'>' This character has no corresponding '<'." The '>' character is used in HTML to end a tag. To include a greater than sign with the text of the page, "&lt;" should be used.
    To Correct: Click the "Fix" button. PageInspector will replace '>' with '&lt;'.
    
    
17. Highlight the Ninth Error: "'mailto://' This should be changed to 'mailto:'." Links to an email address in HTML, should use the format "href="mailto:who@whatever.com", not "href="mailto://who@whatever.com".
    To Correct: PageInspector cannot fix this error. You must correct it in a text editor. Alternatively, the AppleScript named "Fix Selected Error" will correct this error for you.
    
    
18. Highlight the Tenth Error: "'</H1>' This tag has no corresponding '<H1>' tag." This is an example of closing a tag that has never been opened, or that has been already closed.
    To Correct: Click the "Delete" button to remove the entire tag.
    
    
19. You have now corrected all the errors that you can in this file from within PageInspector. To fix the remaining files, you need to open up the file in a text editor, but first we need to save the open file. Go to the "File" menu and choose "Save"
    
    
20. Choose "Close" from the "File" menu. The file will be closed.
    
    
21. Double Click on the file "Tutorial copy.html" from the Finder, which should be in the "Sample Files" folder. It should open up in "SimpleText".
    
    
22. Locate the "<B>" and "<I>" tag overlap error in the second paragraph.
    To Correct: Swap around the "</I>" and "</B>" tags so that the bold tag is closed within the italic environment.
    
    
23. Locate the next error: "<FONT FACE="Consectetuer, Geneva">".
    To Correct: You can do one of two things here:
    
    
    1. Replace "Consectetuer" with the name of a font you have installed on your Macintosh, or
    2. Delete "Consectetuer", including the comma, so that the font "Geneva" will be used instead.
    
    
24. Locate the final error: "<A HREF="mailto://laoreet@dolore.magna">".
    To Correct: If you did not correct this using the AppleScript supplied, delete the "//" characters, leaving "<A HREF="mailto:laoreet@dolore.magna">".
    
    
25. This file now contains no errors! Choose "Save" from the "File" menu.
    
    
26. Choose "Quit" from the "File" menu to exit SimpleText.
    
    
27. If you wish, you may return to PageInspector and rescan the fixed file to make sure the file is faultless.
    
    
28. Return to the Finder. You may remove the corrected file "Tutorial copy.html" if you wish.

Using a Text Editor to Correct Errors

1. In the Finder, select the file "Tutorial" which is in the "Sample Files" folder, and choose "Duplicate" from the "File" menu.
   
   
2. Using the Finder's "Get Info" window, unlock the file "Tutorial copy".
   
   
3. Open the file "Tutorial copy" in PageInspector, but this time click the check box "Read Only" in the Open dialog.
   
   
4. When the scan is complete, highlight a few of the errors. The text display area shows the position of the error in the open file.
   
   
5. You will notice that the image of a crossed-out pencil appears in the top right-hand corner of the Information window. This icon indicates that PageInspector cannot write to this file - either because it has been opened as read only (as it has in this case), or because the file is locked.
   
   
6. Launch a text editor - SimpleText, BBEdit, QUED/M, CodeWarrior, etc.
   
   
7. Use the text editor to open the same file that is open in PageInspector. You can use the text editor (in parallel with PageInspector) to fix up any errors that PageInspector finds.
   Because PageInspector has opened the file read only, your text editor is able to save the file.